<template>
    <div class="returnBack" :class="{ fixed }">
        <van-nav-bar :title="title" :leftText="leftText" :left-arrow="leftArrow" :right-text="rightText">
            <template #right>
                <van-icon name="arrow" size="18" color="#8A879D" />
            </template>
        </van-nav-bar>
    </div>
</template>

<script>
export default {
    name: "ReturnBack",
    props: {
        //标题
        title: {
            type: String,
            default: ''
        },
        //右侧文本内容
        rightText: {
            type: String,
            default: ''
        },
        //固定导航
        fixed: {
            type: Boolean,
            default: false
        },

        leftText: {
            type: String,
            default: ''
        },

        leftArrow: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        onClickRight() {
            this.$emit('clickright');
        },
    },
}
</script>

<style lang="less" scoped>
// @color: #FCFCFD;

.returnBack {
    .icon {
        width: 25px;
        height: 25px;
    }

    .icon2 {
        margin-right: 10px;
    }

    .van-nav-bar {
        background-color: transparent;
    }

    [class*=van-hairline]::after {
        border: none;
    }

    &.fixed {
        position: sticky;
        top: 0;
        z-index: 99;
    }

    /deep/.van-nav-bar__text {
        color: #FFF;
    }

    /deep/.van-nav-bar__left,
    .van-nav-bar__right {
        padding: 0px;
    }
    
}
</style>